<template>
  <div class="index-container">
    <div class="main-header clearfix">
      <el-row>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-button
            type="primary"
            icon="el-icon-plus"
            class="sureBtn"
            size="medium"
            @click="handleAdd"
          >
            录入
          </el-button>
          <el-button
            type="primary"
            icon="el-icon-plus"
            class="sureBtn"
            size="medium"
            @click="handleAddThings"
          >
            批量录入
          </el-button>
          <el-button
            type="primary"
            class="sureBtn"
            size="medium"
            @click="assignIdslistOrder"
          >
            批量分配护工
          </el-button>
          <el-button
            type="success"
            icon="el-icon-search"
            class="sureBtn"
            size="medium"
            @click="handleCheck"
          >
            编辑/查看
          </el-button>
          <el-button
            type="danger"
            class="setBtn"
            icon="el-icon-delete"
            size="medium"
            @click="handleDelete"
          >
            删 除
          </el-button>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <div class="search fr">
            <div>
              <el-input
                v-model="selectForm.name"
                size="medium"
                placeholder="老人姓名"
                clearable
              ></el-input>
            </div>
            <div>
              <el-input
                v-model="selectForm.mobile"
                size="medium"
                placeholder="联系方式"
                clearable
              ></el-input>
            </div>
            <div>
              <el-input
                v-model="selectForm.id_card"
                size="medium"
                placeholder="身份证"
                clearable
              ></el-input>
            </div>

            <el-button
              size="medium"
              type="primary"
              icon="el-icon-search"
              class="fr"
              @click="search"
            >
              搜索
            </el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="main-content">
      <app-table
        :page-data="pageData"
        :table-columns="tableColumns"
        @current-change="handleCurrentChange"
        @handleCheckedRows="handleCheckedRows"
        @giveGift="giveGift"
        @cancelOrder="cancelOrder"
        @assignlistOrder="assignlistOrder"
      ></app-table>
    </div>
    <!-- 老人登记 -->
    <el-dialog
      title="老人登记"
      :visible.sync="dialogRegVisible"
      width="90%"
      :before-close="closeRegDialog"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <el-form
          ref="formData"
          :model="formData"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
          size="medium"
        >
          <el-row :gutter="gutter">
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="服务类型" prop="serve_type">
                <el-select
                  v-model="formData.serve_type"
                  clearable
                  placeholder="请选择服务类型"
                  filterable
                  style="width: 100%;"
                >
                  <el-option :key="0" label="上门服务" :value="1"></el-option>
                  <el-option :key="1" label="健康指导" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="formData.name" placeholder="请输入姓名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="身份证" prop="id_card">
                <el-input
                  v-model="formData.id_card"
                  :rules="[
                    {
                      required: true,
                      message: '请输入身份证号',
                      trigger: 'blur',
                    },
                  ]"
                  placeholder="请输入身份证号"
                  @change="handleChangeCard"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="年龄" prop="age">
                <el-input v-model="formData.age" placeholder="请输入年龄"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="性别" prop="sex">
                <el-select
                  v-model="formData.sex"
                  clearable
                  placeholder="请选择性别"
                  filterable
                  style="width: 100%;"
                >
                  <el-option :key="0" label="男" :value="1"></el-option>
                  <el-option :key="1" label="女" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="出生日期" prop="birthday">
                <el-date-picker
                  v-model="formData.birthday"
                  value-format="yyyy-MM-dd"
                  format="yyyy 年 MM 月 dd 日"
                  placeholder="选择日期时间"
                  :picker-options="dataPickerBeforeTodayOptions"
                  style="width: 100%;"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="联系方式" prop="mobile">
                <el-input v-model="formData.mobile" placeholder="请输入联系方式"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="宗教信仰" prop="religion">
                <el-select
                  v-model="formData.religion"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%;"
                >
                  <el-option :key="0" label="佛教" :value="1"></el-option>
                  <el-option :key="1" label="道教" :value="2"></el-option>
                  <el-option :key="2" label="基督教" :value="3"></el-option>
                  <el-option :key="3" label="伊斯兰教" :value="4"></el-option>
                  <el-option :key="4" label="其他" :value="5"></el-option>
                  <el-option :key="5" label="无宗教信仰" :value="6"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="民族" prop="nation">
                <el-select
                  v-model="formData.nation"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%;"
                >
                  <el-option
                    v-for="(item, index) in dictDatas.nation"
                    :key="index"
                    :label="item"
                    :value="index + 1"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="婚姻状态" prop="marry">
                <el-select
                  v-model="formData.marry"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%;"
                >
                  <el-option
                    v-for="(item, index) in dictDatas.marry"
                    :key="index"
                    :label="item"
                    :value="index + 1"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="老人类型" prop="type">
                <el-select
                  v-model="formData.type"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%;"
                >
                  <el-option
                    v-for="(item, index) in dictDatas.olderType"
                    :key="index"
                    :label="item"
                    :value="index + 1"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="居住情况" prop="live_status">
                <el-select
                  v-model="formData.live_status"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%;"
                >
                  <el-option
                    v-for="(item, index) in dictDatas.live_status"
                    :key="index"
                    :label="item"
                    :value="index + 1"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="经济来源" prop="finance_source">
                <el-select
                  v-model="formData.finance_source"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%;"
                >
                  <el-option
                    v-for="(item, index) in dictDatas.finance_source"
                    :key="index"
                    :label="item"
                    :value="index + 1"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="劳动能力" prop="work">
                <el-select
                  v-model="formData.work"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%;"
                >
                  <el-option
                    v-for="(item, index) in dictDatas.work"
                    :key="index"
                    :label="item"
                    :value="index + 1"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="文化程度" prop="edu">
                <el-select
                  v-model="formData.edu"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%;"
                >
                  <el-option
                    v-for="(item, index) in dictDatas.edu"
                    :key="index"
                    :label="item"
                    :value="index + 1"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="医疗保障" prop="medical_security">
                <el-select
                  v-model="formData.medical_security"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%;"
                >
                  <el-option
                    v-for="(item, index) in dictDatas.medical_security"
                    :key="index"
                    :label="item"
                    :value="index + 1"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="医保卡号" prop="medical_number">
                <el-input v-model="formData.medical_number" placeholder="请输入医保卡号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="所在地" prop="areaArr">
                <el-cascader
                  ref="cascaderAddr1"
                  v-model="formData.areaArr"
                  :options="addressData"
                  :show-all-levels="true"
                  :props="{ expandTrigger: 'hover' }"
                  style="width: 100%;"
                  @change="handleChangeAddress"
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="详细地址" prop="address">
                <el-input v-model="formData.address" placeholder="请输入详细地址"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="获取经纬度" prop="lat">
                <el-row>
                  <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
                    <el-input
                      v-model="formData.lng"
                      :disabled="true"
                    ></el-input>
                  </el-col>
                  <el-col
                    :xs="1"
                    :sm="1"
                    :md="1"
                    :lg="1"
                    :xl="1"
                    style="text-align: center;"
                  >
                    --
                  </el-col>
                  <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
                    <el-input
                      v-model="formData.lat"
                      :disabled="true"
                    ></el-input>
                  </el-col>
                  <el-col
                    :xs="1"
                    :sm="1"
                    :md="1"
                    :lg="1"
                    :xl="1"
                    style="text-align: center;"
                  >
                    -
                  </el-col>
                  <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
                    <el-button size="medium" type="primary" @click="handleMap">
                      获取经纬度
                    </el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="gutter">
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="老人照片" prop="avatar">
                <el-row>
                  <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
                    <div @click="handleResultAvatar">
                      <img-upload
                        v-model="formData.profile"
                        tips="老人照片"
                        method="profile"
                        :imgurl="profile_img"
                        :updisabled="upDisabled"
                        @result="resultAvatar"
                      ></img-upload>
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="证件照" prop="id_card_front">
                <el-row>
                  <el-col :xs="9" :sm="9" :md="9" :lg="9" :xl="9">
                    <div @click="handleResultFront">
                      <img-upload
                        v-model="formData.id_card_front"
                        tips="身份证正面"
                        method="id_card"
                        :imgurl="id_card_front_img"
                        :updisabled="upDisabled"
                        @result="resultFront"
                      ></img-upload>
                    </div>
                  </el-col>
                  <el-col :xs="9" :sm="9" :md="9" :lg="9" :xl="9">
                    <div @click="handleResultBack">
                        <img-upload
                          v-model="formData.id_card_back"
                          tips="身份证反面"
                          method="id_card"
                          :imgurl="id_card_back_img"
                          :updisabled="upDisabled"
                          @result="resultBack"
                        ></img-upload>
                      </div>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="form-footer">
          <el-button
            type="primary"
            class="sureBtn"
            size="medium"
            @click="saveOlder"
          >
            提 交
          </el-button>
          <el-button
            type="info"
            class="setBtn"
            size="medium"
            @click="cancel('formData')"
          >
            取 消
          </el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 老人登记end -->
    <el-dialog
      :title="'护工分配-老人姓名：' + ruleForm.name"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
          size="medium"
        >
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="服务人员" prop="name">
                <el-select
                  v-model="ruleForm.admin_uid"
                  clearable
                  filterable
                  remote
                  multiple
                  reserve-keyword
                  placeholder="请输入姓名"
                  :remote-method="remoteMethod"
                  :loading="loading"
                  style="width: 100%;"
                  @change="changeolder"
                >
                  <el-option
                    v-for="olderItem in oldOptions"
                    :key="olderItem.id"
                    :label="
                      '姓名：' + olderItem.name + '；电话：' + olderItem.mobile
                    "
                    :value="olderItem.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="form-footer">
          <el-button
            type="primary"
            class="sureBtn"
            size="medium"
            @click="saction"
          >
            提 交
          </el-button>
          <el-button
            type="info"
            class="setBtn"
            size="medium"
            @click="cancel('ruleForm')"
          >
            取 消
          </el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 地图 -->
    <el-dialog
      title="选择地址"
      :visible.sync="mapVisible"
      width="60%"
      :before-close="closeMap"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <app-map
          :key="key2"
          ref="map"
          :keyword="keyword"
          @result="result"
        ></app-map>
      </div>
    </el-dialog>
    <!-- 地图end -->
    <!-- 批量导入 -->
    <el-dialog
      title="批量导入"
      :visible.sync="dialogVisibles"
      width="30%"
      :before-close="closeDialogs"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
          size="medium"
        >
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="上传表格" prop="name">
                <el-upload
                  class="upload-demo"
                  :action="url"
                  :on-preview="handlePreview"
                  :before-upload="beforeAvatarUpload"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  :limit="1"
                  :on-exceed="handleExceed"
                  :file-list="fileList"
                  :headers="myHeaders"
                  :on-success="uploadSuccess"
                  accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">
                    只能上传xlsx文件，且不超过50条/每次
                  </div>
                </el-upload>
              </el-form-item>
              <el-form-item label="下载模板" prop="muban">
                <a href="/demo.xlsx">
                  <vab-icon class="downIcon" :icon="['fas', 'file']"></vab-icon>
                </a>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-dialog>
    <!-- 批量导入end -->
    <el-dialog
      :title="currentOlder + '的护工'"
      :visible.sync="assignVisible"
      width="50%"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <el-table
          :data="data2"
          stripe
          :header-cell-style="{ backgroundColor: '#6495ED', color: '#fff' }"
        >
          <el-table-column
            v-for="(item, index) in tableColumns2"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :formatter="item.formatter"
            :filters="item.filters"
            :class-name="item.className"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="handleDeleteHg(scope.row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  const validateCard = (rule, value, callback) => {
    if (!isIdCard(value)) {
      callback(new Error("请输入正确的身份证"));
    } else {
      callback();
    }
  };
  const validatePhone = (rule, value, callback) => {
    if (!isPhone(value)) {
      callback(new Error("请输入正确的手机号"));
    } else {
      callback();
    }
  };
  import store from "@/store";
  import { baseURL } from "@/config/settings";
  import { isIdCard, isPhone } from "@/utils/validate";
  import appTable from "@/components/AppTable/index";
  import dictData from "@/utils/dictionary";
  import addressData from "@/utils/address";
  import imgUpload from "@/components/AppUpload/index";
  import {
    doorServeList,
    assigElder,
    servicerList,
    assignlist,
    deleteAssignlist,
  } from "@/api/oldermanager";
  import { getCarddetail } from "@/utils";
  import appMap from "@/components/AppMap/index";
  export default {
    name: "Index",
    components: { appTable, imgUpload, appMap },
    data() {
      return {
        e_id: "",
        currentOlder: "",
        url: baseURL + "serviceelder/batch/",
        keyword: "",
        areaString: "",
        gutter: 20,
        key: Math.random(),
        key2: Math.random(),
        loading: false,
        mapVisible: false,
        dialogVisible: false,
        assignVisible: false,
        dialogVisibles: false,
        dialogRegVisible: false,
        data2: [],
        fileList: [],
        dictDatas: {},
        oldOptions: [],
        addressData: [],
        ruleForm: {},
        formData: {},
        dictDatas: {},
        cameraDialog: false,
        camPlugins: {},
        upDisabled: false,
        methodType: "profile",
        profile_img: "",
        id_card_front_img: "",
        id_card_back_img: "",
        captureLoading: false,
        rules: {
          name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
          age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
          sex: [{ required: true, message: "请选择性别", trigger: "change" }],
          serve_type: [{ required: true, message: "请选择服务类型", trigger: "change" }],
          mobile: [
            { required: true, message: "请输入电话", trigger: "blur" },
            { validator: validatePhone, trigger: "blur" },
          ],
          id_card: [
            { required: true, message: "请输入身份证号", trigger: "blur" },
            { validator: validateCard, trigger: "blur" },
          ],
          birthday: [
            { required: true, message: "请选择出生日期", trigger: "change" },
          ],
          type: [
            { required: true, message: "请选择老人类型", trigger: "change" },
          ],
          areaArr: [
            { required: true, message: "请选择省市", trigger: "change" },
          ],
          address: [{ required: true, message: "请输入地址", trigger: "blur" }],
        },
        currentSelectedData: [],
        pageData: {},
        selectForm: {},
        dataPickerBeforeTodayOptions: {
          disabledDate(time) {},
        },
        tableColumns: [
          { prop: "name", label: "姓名" },
          { prop: "age", label: "年龄" },
          { prop: "sex", label: "性别", formatter: this.genderFormatter },
          { prop: "mobile", label: "联系方式" },
          { prop: "id_card", label: "身份证号" },
          { prop: "type", label: "老人类型", formatter: this.olderType },
          { prop: "address", label: "家庭地址" },
          { prop: "create_time", label: "登记时间" },
          {
            prop: "assign_status",
            label: "分配状态",
            formatter: this.assignType,
          },
        ],
        tableColumns2: [
          { prop: "name", label: "姓名" },
          // { prop: "mobile", label: "联系方式" },
          // { prop: "sex", label: "性别", formatter: this.genderFormatter },
          // { prop: "age", label: "年龄" },
          // { prop: "in_time", label: "入职时间" },
          // { prop: "remark", label: "备注" },
        ],
        myHeaders: {
          token: store.getters["user/accessToken"],
        },
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      this.dictDatas = dictData;
      this.addressData = addressData;
      this.getTableData();
      this.getTableServe();
    },
    methods: {
      handleChangeCard(value) {
        const userInfo = getCarddetail(value);
        if (userInfo) {
          this.$set(this.formData, "birthday", userInfo.birthday);
          this.$set(this.formData, "age", userInfo.age);
          this.$set(this.formData, "sex", userInfo.sex);
        }
      },
      olderType(rows) {
        for (let index = 0; index < this.dictDatas.olderType.length; index++) {
          const element = this.dictDatas.olderType[index];
          if (index + 1 == rows.type) {
            return element;
          }
        }
      },
      genderFormatter(row, column) {
        if (row.sex == 1) {
          return "男";
        } else if (row.sex == 2) {
          return "女";
        }
      },
      assignType(row, column) {
        if (row.assign_status == 1) {
          return "已分配";
        } else {
          return "未分配";
        }
      },
      getTableData() {
        let data = this.selectForm;
        doorServeList("get", data).then((resp) => {
          if (resp.code === 200) {
            this.pageData = resp.data;
            this.$set(this.pageData, "type", 5);
          }
        });
      },
      getTableServe() {
        let params = {
          page_size: 1000,
        };
        servicerList("get", params).then((resp) => {
          if (resp.code === 200) {
            this.oldOptions = resp.data.list;
          }
        });
      },
      saction() {
        let ids = [];
        let names = [];
        let admin_uid = this.ruleForm.admin_uid;
        if(this.currentSelectedData.length >= 1) {
          this.currentSelectedData.forEach(item => {
            ids.push(item.id)
            names.push(item.name)
          })
          Object.assign(this.ruleForm, { e_id: ids.join(','), name: names.join(",") })
        }
        assigElder("post", Object.assign(this.ruleForm, { admin_uid: admin_uid.join(',') })).then((resp) => {
          if (resp.code === 200) {
            this.$message({
              type: "success",
              message: "添加成功",
            });
            this.dialogVisible = false;
            this.getTableData();
            this.cancel("ruleForm");
          }
        });
      },
      saveOlder() {
        if (this.formData.areaArr && this.formData.areaArr.length > 0) {
          let area = this.formData.areaArr.join(",");
          this.$set(this.formData, "area", area);
        }
        this.$refs["formData"].validate(async (valid) => {
          if (valid) {
            if (this.formData.id) {
              doorServeList("put", this.formData).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "修改成功",
                  });
                }
              });
              this.getTableData();
            } else {
              doorServeList("post", this.formData).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "添加成功",
                  });
                }
                this.getTableData();
              });
            }
          }
        });
      },
      handleAdd() {
        this.dialogRegVisible = true;
        this.formData = {};
      },
      handleAddThings() {
        this.dialogVisibles = true;
        this.fileList = [];
      },
      handleCheck() {
        if (this.currentSelectedData.length === 0) {
          this.$message({
            message: "请选择一条您要查看的内容",
            type: "warning",
          });
        } else if (this.currentSelectedData.length > 1) {
          this.$message({
            message: "一次只能查看一条内容",
            type: "warning",
          });
        } else {
          let params = {
            id: this.currentSelectedData[0].id,
          };
          doorServeList("get", params).then((resp) => {
            if (resp.code === 200) {
              this.formData = resp.data;
              let areaArr = [];
              if (this.formData.area) areaArr = resp.data.area.split(",");
              let areastr = resp.data.area_name;
              this.$set(this.formData, "areaArr", areaArr);
              this.areaString = areastr && areastr.replace(/\/|\s/g,"");
              this.dialogRegVisible = true;
            }
          });
        }
      },
      cancel(formName) {
        this.$refs[formName].resetFields();
        this[formName] = {};
        this.dialogRegVisible = false;
        this.dialogVisible = false;
      },
      handleDelete() {
        if (this.currentSelectedData.length === 0) {
          this.$message({
            message: "请选择一条您要删除的内容",
            type: "warning",
          });
        } else if (this.currentSelectedData.length > 1) {
          this.$message({
            message: "一次只能删除一条内容",
            type: "warning",
          });
        } else {
          this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              let param = {
                id: this.currentSelectedData[0].id,
              };
              doorServeList("delete", param).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "删除成功!",
                  });
                  this.getTableData();
                }
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });
        }
      },
      handleCheckedRows(rows) {
        if (rows && rows instanceof Array && rows.length > 0) {
          this.currentSelectedData = rows;
        } else {
          this.currentSelectedData = [];
        }
      },
      giveGift(data) {
        this.dialogVisible = true;
        this.$set(this.ruleForm, "e_id", data.rows[0].id);
        this.$set(this.ruleForm, "name", data.rows[0].name);
      },
      handleCurrentChange(val) {
        this.selectForm.page = val;
        this.getTableData();
      },
      assignlistOrder(rows) {
        let params = {
          e_id: rows.rows[0].id,
        };
        this.e_id = rows.rows[0].id;
        this.currentOlder = rows.rows[0].name;
        assignlist("get", params).then((resp) => {
          if (resp.code === 200) {
            this.assignVisible = true;
            this.data2 = resp.data;
          }
        });
      },
      assignIdslistOrder(rows) {
        if (this.currentSelectedData.length === 0) {
          this.$message({
            message: "请至少选择一条您要分配的内容",
            type: "warning",
          });
          return false
        }
        let list = [];
        this.currentSelectedData.forEach(item => {
          list.push(item.name)
        })
        this.dialogVisible = true;
        this.$set(this.ruleForm, "name", list.join(','));
      },
      handleDeleteHg(id) {
        this.$confirm("确定删除该护工, 重新分配?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let param = {
              id: id,
            };
            deleteAssignlist("delete", param).then((resp) => {
              if (resp.code === 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                let params = {
                  e_id: this.e_id,
                };
                assignlist("get", params).then((resp) => {
                  if (resp.code === 200) {
                    this.assignVisible = true;
                    this.data2 = resp.data;
                  }
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消操作",
            });
          });
      },
      cancelOrder(rows) {
        this.$confirm("确定删除该条数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let param = {
              id: rows.rows[0].id
            };
            doorServeList("delete", param).then((resp) => {
              if (resp.code === 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.getTableData();
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消操作",
            });
          });
      },
      changeForMal(rows) {
        this.key = Math.random();
        this.dialogVisible = true;
        this.formData = rows.rows[0];
      },
      closeDialog() {
        this.dialogVisible = false;
        this.cancel("ruleForm");
      },
      closeDialogs() {
        this.dialogVisibles = false;
        this.cancel("ruleForm");
      },
      closeRegDialog() {
        this.dialogRegVisible = false;
        this.cancel("formData");
      },
      remoteMethod(query) {
        let _this = this;
        if (query !== "") {
          this.loading = true;
          setTimeout(() => {
            let data = {
              name: query,
            };
            servicerList("get", data).then((resp) => {
              if (resp.code === 200) {
                console.log(resp);
                this.loading = false;
                _this.oldOptions = resp.data.list;
              }
            });
          }, 200);
        } else {
          this.oldOptions = [];
          this.getTableServe();
        }
      },
      changeolder(value) {
        console.log(this.ruleForm.admin_uid);
      },
      handleChangeAddress(value, form, label) {
        // this.$refs.cascaderAddr1.$refs.panel.getCheckedNodes()[0].pathLabels;
        let areaString = this.$refs.cascaderAddr1.$refs.panel
          .getCheckedNodes()[0]
          .pathLabels.join(",");
        this.areaString = areaString;
      },
      resultAvatar(data) {
        this.$set(this.formData, "profile_id", data.id);
      },
      resultFront(data) {
        this.$set(this.formData, "front_id", data.id);
      },
      resultBack(data) {
        this.$set(this.formData, "back_id", data.id);
      },
      handleMap() {
        if (!this.formData.areaArr || this.formData.areaArr == "") {
          this.$message({
            type: "warning",
            message: "请先选择所在地",
          });
          return false;
        }
        if (!this.formData.address || this.formData.address == "") {
          this.$message({
            type: "warning",
            message: "请先填写详细地址",
          });
          return false;
        }

        this.key2 = Math.random();
        this.mapVisible = true;
        this.keyword = this.areaString + this.formData.address;
        console.log(this.areaString, this.formData.address)
      },
      closeMap() {
        this.mapVisible = false;
      },
      result(e) {
        this.mapVisible = false;
        this.$set(this.formData, "lng", e.lng);
        this.$set(this.formData, "lat", e.lat);
      },
      search() {
        this.selectForm.page = 1;
        this.getTableData();
      },
      beforeAvatarUpload(file) {
        const isJPG = file.name.toLowerCase().indexOf("xlsx") > 0;
        // const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error("只能上传 xlsx 格式表格!");
          return false;
        }
        // if (!isLt2M) {
        //   this.$message.error("上传头像图片大小不能超过 2MB!");
        // }
        this.loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        return isJPG;
      },
      handleRemove(file, fileList) {
        // console.log(file, fileList);
      },
      handlePreview(file) {
        // console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(
          `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
            files.length + fileList.length
          } 个文件`
        );
      },
      beforeRemove(file, fileList) {
        // return this.$confirm(`确定移除 ${file.name}？`);
      },
      uploadSuccess(res, file) {
        this.loading.close();
        if (res.code === 200) {
          this.$message.success("上传成功!");
          this.dialogVisibles = false;
          this.getTableData();
        } else {
          this.$message.warning(res.msg);
        }
      },
      handleResultAvatar() {
        //console.log(this.camPlugins.obj)
        //this.camPlugins.ChangeDevice(1)
        this.methodType = "profile";
        // if(!this.camPlugins.obj.success){
        //   this.upDisabled = false;
        // }else{
        //   this.upDisabled = true;
        //   this.cameraDialog = true;
        //   this.methodType = "profile";
        // }
      },
      handleResultFront() {
       // this.camPlugins.ChangeDevice(0)
        this.methodType = "id_card_front";
        // if(!this.camPlugins.obj.success){
        //   this.upDisabled = false;
        // }else{
        //   this.upDisabled = true;
        //   this.cameraDialog = true;
        //   this.methodType = "id_card_front";
        // }
      },
      handleResultBack() {
       // this.camPlugins.ChangeDevice(0)
        this.methodType = "id_card_back";
        // if(!this.camPlugins.obj.success){
        //   this.upDisabled = false;
        // }else{
        //   this.upDisabled = true;
        //   this.cameraDialog = true;
        //   this.methodType = "id_card_back";
        // }
      },
      resultAvatar(data) {
        this.$set(this.formData, "profile_id", data.id);
      },
      resultFront(data) {
        this.$set(this.formData, "front_id", data.id);
      },
      resultBack(data) {
        this.$set(this.formData, "back_id", data.id);
      },
    },
  };
</script>
<style lang="scss" scoped>
.dialogForm{
  ::v-deep {
    .el-dialog__header{
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
  }
}
  .index-container {
    box-sizing: border-box;
    width: 100%;
    padding: 0 30px !important;
    margin: 0 !important;
    background: #fff !important;

    .main-header {
      padding-top: 4px;
      margin-bottom: 24px;

      .search {
        display: inline-block;

        .search-title {
          flex: 0 0 48px;
          width: 48px;
          font-size: 16px;
          line-height: 36px;
          color: #333;
        }
      }

      .search > div {
        display: inline-block;
        margin-left: 20px;
      }
    }
  }

  .form-footer {
    padding-left: 100px;
  }

  .downIcon {
    font-size: 36px;
  }

  .dialog-main {
    .table-do {
      margin-bottom: 15px;
    }

    ::v-deep {
      th {
        .cell {
          color: #fff;
        }
      }
    }
  }
</style>
